<template>
  <div class="m-4">
    <BasicForm @register="register" ref="formElRef" @submit="handleSubmit" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { BasicForm, FormSchema, FormActionType, useForm } from "/@/components/Form";
import { CollapseContainer } from "/@/components/Container";
import { formSchema } from "./BasParameters.data";
import { saveOrUpdate, detail } from "./BasParameters.api";

const schemas: FormSchema[] = formSchema;

export default defineComponent({
  components: { BasicForm, CollapseContainer },
  setup() {
    const formElRef = ref<Nullable<FormActionType>>(null);
    const [register, { setProps, resetFields, setFieldsValue, validate }] = useForm({
      labelWidth: 240,
      schemas,
      // ,
      actionColOptions: {
        span: 24,
      },
      submitButtonOptions: {
        icon: "",
        text: "提交",
      },
    });
    init();
    async function init() {
      let action = await detail();
      resetFields();
      setFieldsValue({
        ...action,
      });
    }
    async function handleSubmit() {
      try {
        const values = await validate();
        //setDrawerProps({ confirmLoading: true });
        //提交表单
        await saveOrUpdate(values, true);

        //emit('success');
      } finally {
        //setDrawerProps({ confirmLoading: false });
      }
    }
    return {
      formElRef,
      schemas,
      register,
      setProps,
      handleSubmit,
    };
  },
});
</script>
